<template>
  <v-card>
    <v-card-title>
      <v-row align="center">
        <v-col class="d-flex" cols="4" sm="2">
          <v-btn block color="primary" @click="goDetail()">新增</v-btn>
        </v-col>
      </v-row>
      <v-spacer></v-spacer>
    </v-card-title>
    <v-data-table
      :loading="loading"
      :headers="headers"
      :items="desserts"
      :footer-props="{
        showFirstLastPage: true,
        prevIcon: 'mdi-minus',
        nextIcon: 'mdi-plus',
      }"
      :page.sync="current_page"
      :items-per-page="12"
      hide-default-footer
      class="elevation-1"
      @page-count="pageCount = $event"
    >
      <template v-slot:[`item.group`]="{ item }">
        {{ item.group.title }}
      </template>
      <template v-slot:[`item.option`]="{ item }">
        <v-btn small class="mr-2" @click="goDetail(item.id)">
          <v-icon class="d-none d-sm-flex" dark left
            >mdi-clipboard-edit-outline</v-icon
          >
          编辑
        </v-btn>

      </template>
    </v-data-table>

    <v-pagination
      class="pt-8 pb-8"
      v-model="current_page"
      :length="last_page"
      :total-visible="10"
      @input="changePage"
    ></v-pagination>
    <!---->

  </v-card>
</template>

<script>

export default {
  name: "User",

  data: () => {
    return {
      currentSaleId: "",
      loading: false,
      name: "",
      hospital: "",
      FullName: "",
      saleId: "",
      mobile: "",
      current_page: 1,
      last_page: 0,
      headers: [
        { text: "ID", value: "id", sortable: false },
        { text: "角色名", value: "title", sortable: false },
        { text: "操作", value: "option", sortable: false },
      ],
      desserts: [],
      chooseCity: [],
      dialog: false,
      accountdialog: false,
      flowdialog: false,
      newPassword: null,
      account: null,
      remark: null,
      type: 1,
      items: [
        { text: "充值", value: 1 },
        { text: "扣款", value: 2 },
      ],
      _templete: null,
      flow: [],
      option: null,
    };
  },

  created() {
    this.getData();
    this.option = JSON.parse(sessionStorage.getItem("option"));
    this.currentSaleId = JSON.parse(
      sessionStorage.getItem("LOGIN_INFO")
    ).saleId;
  },

  methods: {
    getData(page = 1) {
      this.desserts = [];
      this.loading = true;
      this.Http.get("/admin/group/index", {
        page: page,
      }).then((res) => {
        this.loading = false;
        if (res.code == 1) {
          this.total = res.data.total;
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          this.per_page = res.data.per_page;
          this.desserts = res.data.data;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    goDetail(id) {
      this.$router.push({
        path: "/Home/Admin/RoleDetail",
        query: { id: id },
      });
    },

    changePage(page) {
      this.getData(page);
    },

  },
};
</script>